<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- CDN的引入方式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--
    v-cloak指令的作用：
        为防止引入vue.js延迟，从而导致页面展示vue源码的行为提供解决方法
-->
<div id="app_for" v-cloak>
    <h1>{{msg}}</h1>
    <ul v-for="(val, key, ind) in user">
        <li>{{ind}} - {{key}}: {{val}}</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app_for",
        data: {
            msg: "v-for循环",
            user: {
                id: 1001,
                username: "张三",
                pwd: "123456",
                sex: "男",
                address: "北京",
            }
        }
    });
</script>
</html>